<template>
  <view>
    <!-- #ifdef H5 -->
    <component
        v-bind="item.attribute"
        @event="commitEvent"
        :attribute="item.attribute"
        :is="formatComponentName(item.type)"
        :styles="item.style"
        :navBarHeight="navBarHeight"
    ></component>
    <!-- #endif -->
    <!-- #ifdef MP -->
    <yqdButton
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-button'"
    />
    <yqdImage
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-image'"
    />
    <yqdTextInput
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-text-input'"
    />
    <yqdText
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-text'"
    />
    <yqdSwiper
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-swiper'"
    />
    <yqdNoticeBar
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-notice-bar'"
    />
    <yqdSubmitButton
        @event="commitEvent"
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-submit-button'"
    />
    <yqdCusRadio
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-cus-radio'"
    />
    <yqdCusCheckbox
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-cus-checkbox'"
    />
    <yqdCusDatetimePicker
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-cus-datetime-picker'"
    />
    <yqdFormModule
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-form-module'"
    />
    <yqdModule
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-module'"
    />
    <yqdCusDurationInput
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-cus-duration-input'"
    />
    <yqdCusImgUpload
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-cus-img-upload'"
    />
    <yqdCusAreaPicker
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-cus-area-picker'"
    />
    <yqdCusTextarea
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-cus-textarea'"
    />
    <yqdGird
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-gird'"
    />
    <yqdAciton
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-aciton'"
    />
    <yqdNearbyStoresList
        :styles="item.style"
        :attribute="item.attribute"
        v-if="item.type === 'yqd-nearby-stores-list'"
    />
<!-- template end -->
    <!-- #endif -->
  </view>
</template>
<script>
import yqdButton from "../basic/yqd-button/index.vue";
import yqdImage from "../basic/yqd-image/index.vue";
import yqdText from "../basic/yqd-text/index.vue";
import yqdSwiper from "../basic/yqd-swiper/index.vue";
import yqdNoticeBar from "../basic/yqd-notice-bar/index.vue";
import yqdSubmitButton from "../only/yqd-submit-button/index.vue";
import yqdCusRadio from "../cus-form/yqd-cus-radio/index.vue";
import yqdCusCheckbox from "../cus-form/yqd-cus-checkbox/index.vue";
import yqdCusDatetimePicker from "../cus-form/yqd-cus-datetime-picker/index.vue";
import yqdTextInput from "../cus-form/yqd-text-input/index.vue";
import yqdFormModule from "../other/yqd-form-module/index.vue";
import yqdModule from "../other/yqd-module/index.vue";
import yqdCusDurationInput from "../cus-form/yqd-cus-duration-input/index.vue";
import yqdCusImgUpload from "../cus-form/yqd-cus-img-upload/index.vue";
import yqdCusAreaPicker from "../cus-form/yqd-cus-area-picker/index.vue";
import yqdCusTextarea from "../cus-form/yqd-cus-textarea/index.vue";
import yqdGird from "../business/yqd-gird/index.vue";
import yqdAciton from "../business/yqd-aciton/index.vue";
import yqdNearbyStoresList from "../business/yqd-nearby-stores-list/index.vue";
// import end
export default {
  name: "LowCodeComponents",
  components: {
    yqdButton,
    yqdImage,
    yqdText,
    yqdTextInput,
    yqdSwiper,
    yqdNoticeBar,
    yqdSubmitButton,
    yqdCusRadio,
    yqdCusCheckbox,
    yqdCusDatetimePicker,
    yqdFormModule,
    yqdModule,
    yqdCusDurationInput,
    yqdCusImgUpload,
    yqdCusAreaPicker,
    yqdCusTextarea,
    yqdGird,
    yqdAciton,
    yqdNearbyStoresList,
// components end
  },
  props: {
    item: Object,
    navBarHeight: {
      type: Number,
      default: 88, //单位rpx
    },
  },
  data() {
    return {
      formatComponentName(name) {
        return name.split("").reduce((total, curr, idx, arr) => {
          if (curr === "-") {
            curr = "";
            arr[idx + 1] = arr[idx + 1].toUpperCase();
          }
          total += curr;
          return total;
        });
      },
    };
  },
  methods: {
    commitEvent(e) {
      this.$emit("event", e);
    },
  },
};
</script>
<style scoped></style>
